
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>Overlapping Marker Spiderfier demo</title>
  <style>
    #map_canvas { height: auto; position: absolute; bottom: 0; left: 0; right: 0; top: 0; }
    @media print { #map_canvas { height: 950px; } }
  </style>
  <script src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=false"></script>
  <script src="./js/oms-min.js"></script>
  <script>
    window.onload = function() {
      var gm = google.maps;
      var map = new google.maps.Map(document.getElementById('map_canvas'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(50, 0), zoom: 6,  // whatevs: fitBounds will override
        scrollwheel: false
      });
      var oms = new OverlappingMarkerSpiderfier(map,
        {markersWontMove: true, markersWontHide: true});

      oms.addListener('click', function(marker) {
        
      });
      
      
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0; i < window.mapData.length; i ++) {
        var datum = window.mapData[i];
        var loc = new google.maps.LatLng(datum.lat, datum.lon);
        bounds.extend(loc);
        var marker = new google.maps.Marker({
          position: loc,
          title: datum.h,
          map: map
        });
        oms.addMarker(marker);
      }
      map.fitBounds(bounds);

      // for debugging/exploratory use in console
     /*  window.map = map;
      window.oms = oms; */
    }
  </script>
</head>
<body><div id="map_canvas"></div></body>
<script>
  // randomize some overlapping map data -- more normally we'd load some JSON data instead
  var baseJitter = 2.5;
  var clusterJitterMax = 0.1;
  var rnd = Math.random;
  var data = [];
  var clusterSizes = [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2,2, 3, 3, 4, 5, 6, 7, 8, 9, 12, 18, 24];
  for (var i = 0; i < clusterSizes.length; i++) {
    var baseLon = -1 - baseJitter / 2 + rnd() * baseJitter;
    var baseLat = 52 - baseJitter / 2 + rnd() * baseJitter;
    var clusterJitter = clusterJitterMax * rnd();
    for (var j = 0; j < clusterSizes[i]; j ++) data.push({
      lon: baseLon - clusterJitter + rnd() * clusterJitter,
      lat: baseLat - clusterJitter + rnd() * clusterJitter,
      h:   new Date(1E12 + rnd() * 1E11).toString(),
      d:   Math.round(rnd() * 100) + '% happy'
    });
  }
  window.mapData = data;
</script>
</html>
